<template>
  <view class="password-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <image src="/static/settings/back.png" mode="widthFix"></image>
      </view>
      <text class="title">修改密码</text>
    </view>

    <!-- 密码表单 -->
    <view class="form-container">
      <!-- 旧密码 -->
      <view class="form-group">
        <text class="label">旧密码</text>
        <view class="input-wrapper">
          <image src="/static/settings/lock.png" mode="widthFix" class="input-icon"></image>
          <input 
            type="password" 
            placeholder="请输入旧密码" 
            v-model="oldPassword" 
            @blur="validateOldPassword"
            class="password-input"
          />
          <image 
            v-if="showOldPassword" 
            src="/static/settings/eye_open.png" 
            mode="widthFix" 
            class="eye-icon"
            @click="toggleOldPasswordVisibility"
          />
          <image 
            v-else 
            src="/static/settings/eye_close.png" 
            mode="widthFix" 
            class="eye-icon"
            @click="toggleOldPasswordVisibility"
          />
        </view>
        <text class="error-message" v-if="oldPasswordError">{{ oldPasswordError }}</text>
      </view>

      <!-- 新密码 -->
      <view class="form-group">
        <text class="label">新密码</text>
        <view class="input-wrapper">
          <image src="/static/settings/lock.png" mode="widthFix" class="input-icon"></image>
          <input 
            type="password" 
            placeholder="请输入新密码" 
            v-model="newPassword" 
            @blur="validateNewPassword"
            class="password-input"
          />
          <image 
            v-if="showNewPassword" 
            src="/static/settings/eye_open.png" 
            mode="widthFix" 
            class="eye-icon"
            @click="toggleNewPasswordVisibility"
          />
          <image 
            v-else 
            src="/static/settings/eye_close.png" 
            mode="widthFix" 
            class="eye-icon"
            @click="toggleNewPasswordVisibility"
          />
        </view>
        <text class="error-message" v-if="newPasswordError">{{ newPasswordError }}</text>
        
        <!-- 密码强度指示器 -->
        <view class="password-strength" v-if="newPassword">
          <view 
            class="strength-bar" 
            :class="{ weak: passwordStrength === 'weak', medium: passwordStrength === 'medium', strong: passwordStrength === 'strong' }"
            :style="{ width: strengthWidth }"
          ></view>
          <text class="strength-text">{{ strengthText }}</text>
        </view>
      </view>

      <!-- 确认新密码 -->
      <view class="form-group">
        <text class="label">确认新密码</text>
        <view class="input-wrapper">
          <image src="/static/settings/lock.png" mode="widthFix" class="input-icon"></image>
          <input 
            type="password" 
            placeholder="请再次输入新密码" 
            v-model="confirmPassword" 
            @blur="validateConfirmPassword"
            class="password-input"
          />
          <image 
            v-if="showConfirmPassword" 
            src="/static/settings/eye_open.png" 
            mode="widthFix" 
            class="eye-icon"
            @click="toggleConfirmPasswordVisibility"
          />
          <image 
            v-else 
            src="/static/settings/eye_close.png" 
            mode="widthFix" 
            class="eye-icon"
            @click="toggleConfirmPasswordVisibility"
          />
        </view>
        <text class="error-message" v-if="confirmPasswordError">{{ confirmPasswordError }}</text>
      </view>

      <!-- 确认修改按钮 -->
      <button 
        type="primary" 
        class="submit-btn" 
        @click="submitChange"
        :disabled="!isFormValid"
      >
        确认修改
      </button>
    </view>

    <!-- 成功提示（默认隐藏） -->
    <view class="success-message" v-if="showSuccessMessage">
      <image src="/static/settings/success.png" mode="widthFix"></image>
      <text>密码修改成功</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 表单数据
      oldPassword: '',
      newPassword: '',
      confirmPassword: '',
      
      // 错误信息
      oldPasswordError: '',
      newPasswordError: '',
      confirmPasswordError: '',
      
      // 密码可见性控制
      showOldPassword: false,
      showNewPassword: false,
      showConfirmPassword: false,
      
      // 密码强度
      passwordStrength: '',
      strengthWidth: '0%',
      strengthText: '密码强度',
      
      // 成功提示
      showSuccessMessage: false
    }
  },
  computed: {
    // 表单是否有效
    isFormValid() {
      return !this.oldPasswordError && 
             !this.newPasswordError && 
             !this.confirmPasswordError &&
             this.oldPassword && 
             this.newPassword && 
             this.confirmPassword;
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 验证旧密码
    validateOldPassword() {
      // 模拟验证（实际项目中应调用后端API）
      if (!this.oldPassword) {
        this.oldPasswordError = '请输入旧密码';
      } else if (this.oldPassword.length < 6) {
        this.oldPasswordError = '旧密码长度不能少于6位';
      } else {
        // 这里应该调用API验证旧密码
        // 模拟验证通过
        this.oldPasswordError = '';
      }
    },
    
    // 验证新密码
    validateNewPassword() {
      if (!this.newPassword) {
        this.newPasswordError = '请输入新密码';
        this.updatePasswordStrength('');
      } else if (this.newPassword.length < 6) {
        this.newPasswordError = '新密码长度不能少于6位';
        this.updatePasswordStrength('weak');
      } else if (this.newPassword.length > 20) {
        this.newPasswordError = '新密码长度不能超过20位';
        this.updatePasswordStrength('weak');
      } else {
        // 检查密码强度
        const hasLetter = /[a-zA-Z]/.test(this.newPassword);
        const hasNumber = /\d/.test(this.newPassword);
        const hasSpecial = /[^a-zA-Z0-9]/.test(this.newPassword);
        
        if (!hasLetter) {
          this.newPasswordError = '新密码必须包含字母';
          this.updatePasswordStrength('weak');
        } else if (!hasNumber) {
          this.newPasswordError = '新密码必须包含数字';
          this.updatePasswordStrength('medium');
        } else {
          this.newPasswordError = '';
          this.updatePasswordStrength(hasSpecial ? 'strong' : 'medium');
        }
      }
      
      // 如果已经输入了确认密码，重新验证
      if (this.confirmPassword) {
        this.validateConfirmPassword();
      }
    },
    
    // 验证确认密码
    validateConfirmPassword() {
      if (!this.confirmPassword) {
        this.confirmPasswordError = '请确认新密码';
      } else if (this.confirmPassword !== this.newPassword) {
        this.confirmPasswordError = '两次输入的新密码不一致';
      } else {
        this.confirmPasswordError = '';
      }
    },
    
    // 更新密码强度显示
    updatePasswordStrength(strength) {
      this.passwordStrength = strength;
      
      switch (strength) {
        case 'weak':
          this.strengthWidth = '30%';
          this.strengthText = '弱';
          break;
        case 'medium':
          this.strengthWidth = '60%';
          this.strengthText = '中';
          break;
        case 'strong':
          this.strengthWidth = '100%';
          this.strengthText = '强';
          break;
        default:
          this.strengthWidth = '0%';
          this.strengthText = '密码强度';
      }
    },
    
    // 切换密码可见性
    toggleOldPasswordVisibility() {
      this.showOldPassword = !this.showOldPassword;
    },
    
    toggleNewPasswordVisibility() {
      this.showNewPassword = !this.showNewPassword;
    },
    
    toggleConfirmPasswordVisibility() {
      this.showConfirmPassword = !this.showConfirmPassword;
    },
    
    // 提交修改
    submitChange() {
      // 确保所有验证通过
      this.validateOldPassword();
      this.validateNewPassword();
      this.validateConfirmPassword();
      
      if (!this.isFormValid) {
        return;
      }
      
      // 模拟API调用
      uni.showLoading({
        title: '修改中...',
        mask: true
      });
      
      // 模拟网络请求延迟
      setTimeout(() => {
        uni.hideLoading();
        
        // 模拟成功响应
        this.showSuccessMessage = true;
        
        // 3秒后跳转到登录页
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/login/login'
          });
        }, 3000);
      }, 1500);
    }
  }
}
</script>

<style scoped>
/* 基础样式变量 */
:root {
  --primary-color: #42b983;
  --error-color: #f56c6c;
  --success-color: #67c23a;
  --text-color: #333;
  --text-light-color: #666;
  --text-hint-color: #999;
  --border-color: #ddd;
  --bg-color: #f5f5f5;
}

/* 容器样式 */
.password-container {
  background-color: var(--bg-color);
  min-height: 100vh;
}

/* 头部样式 */
.header {
  height: 100rpx;
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  position: relative;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 30rpx;
  top: 50%;
  transform: translateY(-50%);
}

.back-btn image {
  width: 24rpx;
  height: 40rpx;
}

.title {
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  width: 100%;
}

/* 表单容器 */
.form-container {
  padding: 60rpx 40rpx;
}

.form-group {
  margin-bottom: 50rpx;
}

.label {
  display: block;
  margin-bottom: 15rpx;
  font-size: 28rpx;
  color: var(--text-hint-color);
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #fff;
  border-radius: 10rpx;
  border: 1rpx solid var(--border-color);
  padding: 0 30rpx;
}

.input-wrapper:focus-within {
  border-color: var(--primary-color);
}

.input-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 20rpx;
}

.password-input {
  flex: 1;
  height: 100%;
  font-size: 32rpx;
  color: var(--text-color);
}

.eye-icon {
  width: 36rpx;
  height: 36rpx;
  margin-left: 20rpx;
}

.error-message {
  display: block;
  margin-top: 15rpx;
  font-size: 24rpx;
  color: var(--error-color);
  min-height: 30rpx;
}

/* 密码强度指示器 */
.password-strength {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
}

.strength-bar {
  height: 8rpx;
  border-radius: 4rpx;
  transition: width 0.3s ease;
}

.strength-bar.weak {
  background-color: var(--error-color);
}

.strength-bar.medium {
  background-color: #e6a23c;
}

.strength-bar.strong {
  background-color: var(--success-color);
}

.strength-text {
  margin-left: 20rpx;
  font-size: 24rpx;
  color: var(--text-hint-color);
}

/* 提交按钮 */
.submit-btn {
  height: 90rpx;
  background-color: var(--primary-color);
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 45rpx;
  margin-top: 20rpx;
}

.submit-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 成功提示 */
.success-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 40rpx 60rpx;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1000;
}

.success-message image {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 20rpx;
}

.success-message text {
  font-size: 32rpx;
}
</style>